<template>
  <div
    v-if="pageflag"
    class="display-flex fw-wrap jc-space-between"
    style="padding: 15px 20px"
  >
    <div
      v-for="(item, i) in typeData"
      :key="i"
      class="left-bottom-item"
      @click="goView(item)"
    >
      <el-avatar
        :size="60"
        :src="item.src"
        style="background-color: #004080"
      ></el-avatar>
      <el-tooltip
        v-if="item.name.length > 6"
        class="item"
        effect="light"
        :content="item.name"
        placement="top"
      >
        <div class="padding-6 left-bottom-title">
          {{ item.name }}
        </div>
      </el-tooltip>
      <div v-else class="padding-6 left-bottom-title">
        {{ item.name }}
      </div>
    </div>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 100px">
    重新获取
  </Reacquire>
</template>
<script>
export default {
  data() {
    return {
      pageflag: false,
      typeData: [], // 接入类型
      list: [
        {
          name: "涉爆粉尘",
          url: "/screen/dust",
          src: require("@/assets/images/iot/access_fcsb.png"),
        },
        {
          name: "可燃气体",
          url: "/screen/dust",
          src: require("@/assets/images/iot/access_krqt.png"),
        },
        {
          name: "抗爆柜",
          url: "/screen/dust",
          src: require("@/assets/images/iot/access_wxpck.png"),
        },
        {
          name: "金属熔融",
          url: "",
          src: require("@/assets/images/iot/access_gn.png"),
        },
        {
          name: "危化品仓库",
          url: "",
          src: require("@/assets/images/iot/access_cj.png"),
        },
        {
          name: "有限空间",
          url: "",
          src: require("@/assets/images/iot/access_ny.png"),
        },
      ],
    };
  },
  created() {},

  mounted() {
    this.getData();
  },
  methods: {
    // 接入类型
    getData() {
      let res = [
        {
          id: "249dec8c5fbd421195c2787e2a5cd147",
          name: "涉爆粉尘",
        },
        {
          id: "249dec8c5fbd421195c2787e2a5cd148",
          name: "抗爆柜",
        },
        {
          id: "249dec8c5fbd421195c2787e2a5cd149",
          name: "可燃气体",
        },
        {
          id: "249dec8c5fbd421195c2787e2a5cd150",
          name: "金属熔融",
        },
        {
          id: "249dec8c5fbd421195c2787e2a5cd151",
          name: "危化品仓库",
        },
        {
          id: "249dec8c5fbd421195c2787e2a5cd152",
          name: "有限空间",
        },
      ];
      this.pageflag = true;
      const arr = [];
      res.map((item) => {
        this.list.forEach((_item) => {
          if (item.name === _item.name) {
            const obj = {
              id: item.id,
              name: item.name,
              url: _item.url,
              src: _item.src,
            };
            arr.push(obj);
          }
        });
      });
      this.typeData = arr;
    },
    // 跳转页面
    goView(row) {
      console.log("row", row.id);
      const respp = [
        { id: "249dec8c5fbd421195c2787e2a5cd147" },
        { id: "249dec8c5fbd421195c2787e2a5cd148" },
        { id: "249dec8c5fbd421195c2787e2a5cd149" },
      ];
      console.log("res =======", respp);
      const count = respp.filter((item) => item.id === row.id);
      console.log("const ===", count);
      if (count.length === 0) {
        this.$message.error("该监管类型下没有企业");
      } else {
        if (row.url) {
          this.$router.push(`${row.url}?id=${row.id}&name=${row.name}`);
        } else {
          this.$message.error("未接入此类型");
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.left-bottom-item {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  cursor: pointer; // 鼠标滑过，鼠标指针样式变小手
  width: 110px;
  padding: 10px;
  background: #052556;
  margin-bottom: 20px;
  .left-bottom-title {
    width: 99%;
    color: #fff;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; //内容超出不换行
    text-overflow: ellipsis;
  }
}
</style>
